<template>
  <view>
    <button @click="showPopup">点击弹出</button>
    <uni-popup ref="popupRef" type="bottom" background-color="#FFF">
      <view>弹出层内容 </view>
      <button @click="closePopup">我是关闭弹出</button>
    </uni-popup>
    <button @click="openPayment">打开支付弹窗</button>
    <custom-payment :order-id="'888'" :amount="99" ref="customPaymentRef"></custom-payment>
  </view>
</template>

<script lang="ts" setup>
  // 注册了全局组件的类型，就无需导入组件
  // import CustomPayment from '@/components/custom-payment/custom-payment.vue'
  import type { CustomPaymentInstance } from '@/types/components'
  import { ref } from 'vue'

  const popupRef = ref<UniHelper.UniPopupInstance>()
  const showPopup = () => {
    popupRef.value?.open?.()
  }

  const closePopup = () => {
    popupRef.value?.close?.()
  }

  // const customPaymentRef = ref<InstanceType<typeof CustomPayment>>()
  // 类型封装后，获取类型更方便
  const customPaymentRef = ref<CustomPaymentInstance>()
  const openPayment = () => {
    customPaymentRef.value?.open()
  }
</script>

<style scoped></style>
